<template>
  <el-form-item :prop="item.key" :label-width="item['labelWidth'] !== undefined
    ? item['labelWidth'] + 'px'
    : labelWidth + 'px'
    " :label="item.title" :rules="init_rules(item, form)" v-if="item.edit !== false">
    <template #label style="display: inline-flex">
      <slot :name="'label-' + item.key" :info="item" style="display: inline-flex">
        <span v-html="item.title" :style="doJustify() === true
          ? `display: inline-block;font-weight: normal;margin-right: 3px;text-align-last: justify !important; width:${item['labelWidth'] !== undefined
            ? parseFloat(item['labelWidth']) - 20 + 'px'
            : parseFloat(labelWidth) - 20 + 'px'
          } `
          : ''
          "></span>
      </slot>
    </template>
    <slot :name="item.key" :info="form">
      <el-date-picker :style="getItemLabelWidth(item, itemWidth, labelWidth)" v-if="item['date'] === true"
        v-model="form[item.key]" :type="item['time'] ? 'datetime' : 'date'" :name="item.key" :ref="item.key"
        :placeholder="item['placeholder']" :disabled="item['disable'] == true"
        :value-format="item['time'] ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd'"
        :picker-options="set_time(item['dateOptions'], form)" @change="item['change'] && item['change'](form)"
        v-bind="item['attrs']">
      </el-date-picker>
      <el-select automatic-dropdown :multiple-limit="item['multipleLimit'] ? item['multipleLimit'] : 0"
        :collapse-tags="item['collapseTags'] ? item['collapseTags'] : false"
        :allow-create="item['allowCreate'] === true" :clearable="item['clearable'] == true" :default-first-option="item['defaultFirstOption'] === undefined
          ? true
          : item['defaultFirstOption']
          " :style="getItemLabelWidth(item, itemWidth, labelWidth)" v-else-if="item['dicts'] !== undefined"
        v-model="form[item.key]" :multiple="item['multiple'] === undefined ? false : true" :name="item.key"
        :ref="item.key" :filterable="true" :remote-method="(words) => {
          throttle(() => {
            item.query(
              words,
              (data) => {
                $set(item, 'dicts', data);
              },
              form
            );
          }, 200);
        }
          " :remote="item['query'] ? true : false" :disabled="item['disable'] == true"
        :placeholder="item['placeholder']" @focus="(event) => {
          item['query']
            ? item.query(
              '',
              (data) => {
                $set(item, 'dicts', data);
              },
              form
            )
            : undefined;
        }
          " @change="
            item['change'] &&
            item['change'](
              form,
              item['multiple'] === undefined
                ? item['dicts'].filter((a) => a.value == form[item.key])
                : item['dicts'].filter((a) =>
                  form[item.key].some((b) => b == a.value)
                ),
              formAttrs
            )
            " @clear="() => {
              item.query
                ? item.query('', (data) => {
                  $set(item, 'dicts', data);
                })
                : undefined;
            }
              " @blur="(a) => {
                item['blur'] ? item['blur'](a, form) : () => { };
              }
                " v-bind="item['attrs']">
        <el-option v-for="li in item['dicts']" :key="li?.value" :label="li?.label" :value="li?.value">
          <slot :name="item?.key + '-dict'" :info="li">
            {{ li?.label }}
          </slot>
        </el-option>
        <div slot="empty" v-if="item['goAdd'] !== undefined">
          <div style="padding: 5px; text-align: center">
            <el-button type="text" @click="item['goAdd'](form, item)">+ 去增加</el-button>
          </div>
        </div>
      </el-select>
      <el-checkbox-group v-model="form[item.key]" :disabled="item['disable'] == true" :ref="item.key"
        v-else-if="item['checkbox'] !== undefined" :style="getItemLabelWidth(item, itemWidth, labelWidth)"
        @change="item['change'] && item['change'](form)" v-bind="item['attrs']">
        <el-checkbox :name="item.key + checkbox" :label="checkbox" v-for="(checkbox, index) in item['checkbox']"
          :key="index">{{ item["labels"] ? item["labels"][index] : checkbox }}</el-checkbox>
      </el-checkbox-group>
      <el-radio-group :ref="item.key" v-model="form[item.key]" :disabled="item['disable'] == true"
        v-else-if="item['radio'] !== undefined" :style="getItemLabelWidth(item, itemWidth, labelWidth)"
        @input="item['input'] && item['input'](form)" v-bind="item['attrs']">
        <el-radio :label="radio" :name="item.key" v-for="(radio, index) in item['radio']" :key="index">{{ item["labels"]
          ? item["labels"][index] : radio }}</el-radio>
      </el-radio-group>
      <el-switch :name="item.key" :ref="item.key" v-model="form[item.key]" :disabled="item['disable'] == true"
        v-else-if="item['switch'] !== undefined" :style="getItemLabelWidth(item, itemWidth, labelWidth)"
        :active-color="item.trueColor ? item.trueColor : '#13ce66'"
        :inactive-color="item.falseColor ? item.falseColor : '#ff4949'" :active-value="item['activeValue'] !== undefined ? item['activeValue'] : true
          " :inactive-value="item['inactiveValue'] !== undefined ? item['inactiveValue'] : false
            " :active-text="item['activeText']" :inactive-text="item['inactiveText']"
        :width="item.switchWidth ? item.switchWidth : undefined" @change="item['change'] && item['change'](form)"
        v-bind="item['attrs']">
      </el-switch>
      <el-autocomplete v-else-if="item['autocomplete'] === true" :name="item.key" :ref="item.key"
        v-model="form[item.key]" :fetch-suggestions="item['fetch_suggestions']"
        :trigger-on-focus="item['triggerOnFocus'] === true" :popper-append-to-body="item['popperAppendToBody'] === true"
        :popper-class="item['popperClass']" highlight-first-item :select-when-unmatched="true"
        :value-key="item['valueKey']" @select="(a) => {
          item['auto_select'] ? item['auto_select'](a, form) : undefined;
        }
          " @input="(a) => {
            item['input'] ? item['input'](a, form) : undefined;
          }
            " :style="getItemLabelWidth(item, itemWidth, labelWidth)" :disabled="item['disable'] == true"
        :placeholder="item['placeholder']" v-bind="item['attrs']">
        <slot :name="item.key + '-autocomplete'" :info="scope.item" slot-scope="scope">
          {{ scope.item[[item["valueKey"]]] }}
        </slot>
      </el-autocomplete>
      <el-upload :style="'display:flex;' + getItemLabelWidth(item, itemWidth, labelWidth)
        " v-else-if="item['upload'] === true" :name="item.key" :ref="item.key" :action="item['action']"
        :headers="item['headers']" :data="item['data']" :auto-upload="item['autoUpload'] === undefined"
        :on-preview="item['preview']" :before-remove="item['beforeRemove']" :on-remove="item['remove']"
        :on-progress="item['progress']" :on-success="(response, file, fileList) =>
          item['success'](response, file, fileList, form)
          " :on-exceed="item['exceed']" :list-type="item['listType']" :on-error="item['error']"
        :on-change="item['change']" :before-upload="item['beforeUpload']" :multiple="item['multiple'] === true"
        :limit="item['limit']" :file-list="item['fileList']" :placeholder="item['placeholder']"
        :show-file-list="item['showFileList']" :drag="item['drag'] === true" :accept="item['accept']"
        :http-request="(file) => item['httpRequest'](file, form)" :disabled="item['disable'] == true"
        v-bind="item['attrs']">
        <template #trigger :style="item['style']">
          <slot :name="`${item.key}-upload`"><el-button type="primary">点击上传</el-button></slot>
        </template>
        <template #tip>
          <slot :name="`${item.key}-upload-tip`" :info="form"></slot>
        </template>
      </el-upload>
      <el-input :style="getItemLabelWidth(item, itemWidth, labelWidth)" v-else-if="item['number'] === true"
        v-model="form[item.key]" :placeholder="item['placeholder']" type="number" :disabled="item['disable'] == true"
        :name="item.key" :ref="item.key" @change="() => {
          form[item.key] = parseFloat(form[item.key]);
          item['change'] && item['change'](form);
        }
          " @input="(val) => {
            if (val.length > 12) {
              form[item.key] = val.toString().substring(0, val.length - 1);
              return;
            }
            item['input'] && item['input'](val, form);
          }
            " @blur="item['blur'] && item['blur'](form)" v-bind="item['attrs']">
        <template slot="prefix" v-if="item['prefix']">
          <div v-html="item['prefix']"></div>
        </template>
        <template slot="suffix" v-if="item['suffix']">
          <div v-html="item['suffix']" @click="item['click'] && item.click(form)" :disabled="showCommitBtn == false">
          </div>
        </template>
      </el-input>
      <el-input :style="getItemLabelWidth(item, itemWidth, labelWidth)" v-else-if="item['area'] === true"
        type="textarea" :name="item.key" :ref="item.key" :rows="item['rows'] === undefined ? 3 : item['rows']"
        :show-word-limit="item['show-word-limit'] === undefined ? true : item['show-word-limit']"
        :placeholder="item['placeholder']" :maxlength="item['max'] ? item['max'] : 100" v-model="form[item.key]"
        :disabled="item['disable'] == true" @change="item['change'] && item['change'](form)"
        @input="item['input'] && item['input'](form)" @blur="item['blur'] && item['blur'](form)" v-bind="item['attrs']">
      </el-input>
      <icon-picker :style="getItemLabelWidth(item, itemWidth, labelWidth)" v-else-if="item['icon'] === true"
        :name="item.key" :ref="item.key" :placeholder="item['placeholder']" v-model="form[item.key]"
        :disabled="item['disable'] == true" v-bind="item['attrs']">
      </icon-picker>
      <el-select-tree :style="getItemLabelWidth(item, itemWidth, labelWidth)" v-else-if="item['tree'] === true"
        :name="item.key" :ref="item.key" :placeholder="item['placeholder']" v-model="form[item.key]"
        :disabled="item['disable'] == true" v-bind="Object.assign(
          { 'check-strictly': true, 'show-checkbox': true, lazy: false },
          item['attrs']
        )
          ">
        <template v-for="(_, name) in $scopedSlots" v-slot:[name]="data">
          <slot :name="name" v-bind="data"></slot>
        </template>
      </el-select-tree>
      <span :style="getItemLabelWidth(item, itemWidth, labelWidth)" style="display: flex"
        v-else-if="item['span'] === true" :name="item.key" :ref="item.key" v-html="form[item.key]">
      </span>
      <el-rate style="display: flex; align-items: center; height: 34px" :style="getItemLabelWidth(item, itemWidth, labelWidth) +
        `;${item?.attrs?.style}`
        " v-else-if="item['rate'] === true" :name="item.key" :ref="item.key" v-model="form[item.key]"
        v-bind="item.attrs">
      </el-rate>
      <el-input :style="getItemLabelWidth(item, itemWidth, labelWidth)" v-else :name="item.key" :ref="item.key"
        :disabled="item['disable'] == true" v-model="form[item.key]" :placeholder="item['placeholder']"
        :maxlength="item['max'] ? item['max'] : 20" clearable
        :show-word-limit="item['show-word-limit'] === undefined ? true : item['show-word-limit']"
        :show-password="item['password']" @change="item['change'] && item['change'](form)"
        @input="item['input'] && item['input'](form)" @blur="item['blur'] && item['blur'](form)" v-bind="item['attrs']">
        <template slot="prefix" v-if="item['prefix']">
          <div v-html="item['prefix']"></div>
        </template>
        <template slot="suffix" v-if="item['suffix']">
          <el-button type="text" v-if="item['suffix'] === true" :disabled="showCommitBtn == false"
            @click="item['click'] && item.click(form)" style="cursor: pointer" class="el-icon-more"></el-button>
          <div v-else v-html="item['suffix']" @click="item['click'] && item.click(form)"></div>
        </template>
      </el-input>
    </slot>
  </el-form-item>
</template>

<script>
import opt from "./optimize.js";
import iconPicker from "../ModelVueIcon/iconPicker.vue";
import elSelectTree from "el-select-tree";
import { init_rules } from "./comm";
export default {
  components: { iconPicker, "el-select-tree": elSelectTree },
  props: ["item", "subform", "labelWidth", "itemWidth", "showCommitBtn", "justify", "formAttrs",],
  data() {
    return {
      form: {}
    };
  },
  methods: {
    init_rules(obj, form) {
      return init_rules(obj, form);
    },
    doJustify() {
      return this.justify(this);
    },
    getItemLabelWidth(item, itemWidth, labelWidth) {
      return `width:${(item.width ? item.width : itemWidth) - labelWidth}px`;
    },
    //节流
    throttle(fun, time) {
      opt.throttle(fun, time);
    },
    set_time(get_dateOptions, form) {
      if (get_dateOptions) {
        let dateOptions = get_dateOptions(form);
        return dateOptions;
      } else {
        return {};
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.form = this.subform;
    })
  }
};
</script>

<style lang="scss" scoped></style>